<template>
    <div id="sh3d" class="viewer">

    </div>
</template>

<script>
    let Cesium = require('cesium/Source/Cesium');
    export default {
        name: "sh3d",
        data: function () {
            return {}
        },
        mounted() {
            this.init()
        },
        methods: {
            init: function () {
                var viewer = new Cesium.Viewer("sh3d")
                this.createCar(viewer)

            },
            createCar: function (viewer) {
                viewer.entities.removeAll();
                /*位置信息*/
                var position = Cesium.Cartesian3.fromDegrees(
                    -123.0744619,
                    44.0503706,
                    0
                );
                var heading = Cesium.Math.toRadians(135);
                var pitch = 0;
                var roll = 0;
                var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
                /*绘制角度等等姿态信息*/
                var orientation = Cesium.Transforms.headingPitchRollQuaternion(
                    position,
                    hpr
                );
                /*添加实体对象*/
                var entity = viewer.entities.add({
                    name: 'car',
                    position: position,
                    orientation: orientation,
                    model: {
                        uri: './Cesium/models3d/CesiumMilkTruck/CesiumMilkTruck.glb',
                        minimumPixelSize: 128,
                        maximumScale: 20000,
                    },
                });
                /*相机锁定实体对象*/
                viewer.trackedEntity = entity;
                /*绑定数据点击事件触发修改位置。这里实际就是对服务传来位置信息进行更新即可*/
                this.bindEvent(viewer, entity)
            },
            bindEvent: function (viewer, car) {
                var scene = viewer.scene;
                var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
                handler.setInputAction(function (movement) {
                    /*转换鼠标点击屏幕位置为地理位置*/
                    var position = viewer.scene.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid);
                    car.position = position
                }, Cesium.ScreenSpaceEventType.LEFT_CLICK);//绑定鼠标左击事件
            }
        }
    }
</script>

<style scoped>

</style>
